<template>
  <div class="pop" v-if="showP">
    <div class="top"></div>
    <div class="bottom">
          <!-- 固定开始 -->
      <div class="bottom-fixed">
        <div class="guanbi">
          <i
            class="iconfont icon-guanbi"
            style="font-size: 30px"
            @click="getF"
          ></i>
        </div>
        <div class="bottom-img">
          <img :src="PopDate.ProList[0]" alt="" width="150px" />
          <div class="pic">
            <span>￥：</span>{{ PopDate.pic }}
            <div class="isSelect">
              已选:{{ color ? color : this.PopDate.typeList.color[0] }},{{
                size ? size : this.PopDate.typeList.size[0]
              }}码,{{ num }}
            </div>
          </div>
        </div>
      </div>
      <!-- 固定结束 -->

      <!-- 滚动开始 -->
      <div class="scoll">
        <p class="pColor">颜色</p>
        <div class="selectColor">
          <div
            class="Color-item"
            v-for="(item, index) in PopDate.typeList.color"
            :key="index"
            @click="check(index)"
            :class="activeColor === index ? 'active' : ''"
          >
            {{ item }}
          </div>
        </div>
        <p class="pSize">尺码</p>
        <div class="selectSize">
          <div
            class="Size-item"
            v-for="(items, indexs) in PopDate.typeList.size"
            :key="indexs"
            @click="checked(indexs)"
            :class="activeSize === indexs ? 'active' : ''"
          >
            {{ items }}
          </div>
        </div>
        <div class="btn">
          <p class="num">数量：{{ num }}</p>
          <div>
            <button @click="reduce" :disabled="num <= 1">-</button>{{ num
            }}<button @click="add">+</button>
          </div>
          
        </div>
      </div>
      <!-- 滚动结束 -->
      
    </div>
    <div class="addCart">
        <button class="add" @click='getF'>加入购物车</button>
        <button class="buy" @click="goCart">立即购买</button>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 0, //颜色样式
      activeSize: 0, //颜色样式
      color: "", //选中的颜色
      size: "", //选中的尺码
      // showPop: false, //弹出层
      num: 1, //初始数量
    };
  },
  props: {
    PopDate: {
      type: Object,
    },
    showP: {
      type: Boolean,
    },
    obj:{
      type:Object
    }
  },
  methods: {
    getF() {
      //关闭弹出层
      //通知父组件修改数据
      this.$emit("getF", false);
      let obj = this.$store.state.proSelectObj;
      this.$store.commit("addCartList",obj);
    },
    check(index){ //选中颜色
      this.activeColor = index;
      this.color = this.PopDate.typeList.color[index];
     let obj = this.$store.state.proSelectObj;
       obj.color = this.color
      //触发mutations 中的方法，添加颜色
      this.$store.commit("changeProSelectObj",obj);
      
    },
    
    checked(indexs) {
      //选中尺码
      this.activeSize = indexs;
      this.size = this.PopDate.typeList.size[indexs];
      let obj = this.$store.state.proSelectObj;
       obj.size = this.size
      //触发mutations 中的方法，添加尺码
      this.$store.commit("changeProSelectObj",obj);
    },
    reduce() {
      //数量-
      this.num = this.num - 1;
      //使用vuex修改数量
      let obj = this.$store.state.proSelectObj;
       obj.num = this.num
      //触发mutations 中的方法，添加数量
      this.$store.commit("changeProSelectObj",obj);
    },
    add() {
      //数量+
      this.num = this.num + 1;
      //使用vuex修改数量
      let obj = this.$store.state.proSelectObj;
       obj.num = this.num
      //触发mutations 中的方法，添加数量
      // console.log(obj);
      this.$store.commit("changeProSelectObj",obj);
    },
    goCart(){ //跳转到购物车
      this.$router.push('/cart')
      let obj = this.$store.state.proSelectObj;
      this.$store.commit("addCartList",obj);
    },
    
  },
};
</script>

<style scoped lang='scss'>
.active {
  color: red;
}
.pop {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;

  .top {
    height: 700px;
    background: rgba(0, 0, 0, 0.3);
  }
  .bottom {
    background: white;
    flex: 1;
    border-radius: 100px 100px 0 0;
    border: 1px solid red;
    // overflow: auto;

    // .bottom-fixed{
    //   position: fixed;
    //   top: 700px;
    //   width: 100%;
    //   height: 800px;
    // }
    // .scoll{
    //   flex: 1;
    //   position: absolute;
    //   margin-top: 900px;
    //   // overflow: hidden;
    // background: #ccc;
    // }
    .guanbi {
      width: 100%;
      height: 200px;
      position: relative;
      .icon-guanbi {
        position: absolute;
        right: 100px;
        top: 30px;
      }
    }
    .bottom-img {
      margin-left: 50px;
      display: flex;
      .pic {
        margin-left: 50px;
        color: red;
      }
      span {
        font-size: 16px;
      }
      .isSelect {
        color: black;
        margin-top: 300px;
      }
    }
    .pColor,
    .pSize {
      margin-left: 100px;
      font-weight: bold;
    }
    .selectColor,
    .selectSize {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      width: 100%;
      .Color-item,
      .Size-item {
        text-align: center;
        width: 500px;
        background: #f2f2f2;
        border-radius: 50px;
        font-weight: bold;
        margin-bottom: 50px;
        margin-left: 50px;
      }
    }
    .btn {
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin-bottom: 200px;
      .num {
        margin-left: -250px;
        font-weight: bold;
      }
    }
  }
  .addCart{
    height: 200px;
    width: 100%;
    position: fixed;
    bottom: 50px;
    display: flex;
    justify-content: space-around;
    .add,.buy{
      width: 45%;
      border: none;
      border-radius: 100px;
      background: red;
      color: white;
    }
    .buy{
      background: #FFC50D;
    }
  }
}
</style>